﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Mèo béo Guitar" />
    <meta name="keywords" content="slit slider, plugin, css3, transitions, jquery, fullscreen, autoplay" />
    <meta name="author" content="Codrops" />
    <link rel="shortcut icon" href="../favicon.ico">
    <link rel="stylesheet" type="text/css" href="@Url.Content("~/css/style.css")" />
    <link rel="stylesheet" type="text/css" href="@Url.Content("~/css/custom.css")" />
    <script type="text/javascript" src="@Url.Content("~/js/modernizr.custom.79639.js")"></script>
    <noscript>
        <link rel="stylesheet" type="text/css" href="@Url.Content("~/css/styleNoJS.css")" />
    </noscript>
</head>
<body>
    <div id="ac_background" class="ac_background">
        <img class="ac_bgimage" src="#" alt="Background" />
        <div class="ac_overlay"></div>
        <div class="ac_loading"></div>
    </div>
    <div id="ac_content" class="ac_content">
        <h1><span>Mèo béo</span>Guitar</h1>
        <div class="ac_menu">
            <ul>
                <li>
                    <a href="#">Giới thiệu</a>
                    <div class="ac_subitem">
                        <span class="ac_close"></span>
                        <h2>Giới thiệu</h2>
                        <ul>
                            @for (int i = 0; i < ViewBag.About.Count; i++)
                            {
                                if (i == 0)
                                {
                                <li style="list-style: none;">@ViewBag.About[i].AboutTitle</li>
                                <li style="list-style: none; text-transform: initial;">
                                    <div style="overflow: auto;">
                                        <span>@ViewBag.About[i].AboutContent</span>
                                    </div>
                                </li>
                                }
                            }
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="#">Shop Guitar</a>
                    <div class="ac_subitem">
                        <span class="ac_close"></span>
                        <h2>Shop Guitar</h2>
                        <ul>
                            <li style="list-style: none;">
                                <h3>@Html.ActionLink("Sản phẩm", "Index", "Shop", new { idShop = 0 }, null)</h3>
                            </li>
                            <li>@Html.ActionLink("CLASSIC", "Index", "Shop", new { idShop = 1 }, null)</li>
                            <li>@Html.ActionLink("ACOUSTIC", "Index", "Shop", new { idShop = 2 }, null)</li>
                            <li>@Html.ActionLink("PHỤ KIỆN", "Index", "Shop", new { idShop = 3 }, null)</li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="#">Khóa học</a>
                    <div class="ac_subitem">
                        <span class="ac_close"></span>
                        <h2>Khóa học</h2>
                        <ul>
                            <li>Giới thiệu qua về chương trình học, dạy những gì, ở đâu</li>
                            <li>Ratatouille</li>
                            <li>Le Tourin</li>
                            <li>Wild Salmon Bruschetta</li>
                            <li>Sweet Mustard Gratin</li>
                            <li>Homemade Pizza Mediteranica</li>
                            <li>Spanakopita Speciale</li>
                            <li>Ricotta Spinach Cannelloni</li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="#">Sự kiện</a>
                    <div class="ac_subitem">
                        <span class="ac_close"></span>
                        <h2>Sự kiện</h2>
                        <ul>
                            <li>Giới thiệu qua về nội dung của sự kiện, hoạt động cho đối tượng nào..</li>
                            <li>New England Apple Crisp</li>
                            <li>Southern Pecan Pie</li>
                            <li>Brownie Fudge Sundae</li>
                            <li>Strawberry Mousse Cake</li>
                            <li>Vanilla Crème brûlée</li>
                            <li>Lemon Sorbet</li>
                            <li>Crunchy Almond Cake</li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="#">Bài giảng</a>
                    <div class="ac_subitem">
                        <span class="ac_close"></span>
                        <h2>Bài giảng</h2>
                        <ul>
                            <li>Bài giảng</li>
                            <li>CARM Douro Reserva</li>
                            <li>Fontodi Colli della Toscana Centrale Flaccianello</li>
                            <li>Alban Syrah Edna Valley Alban Estate Reva</li>
                            <li>Zaca Mesa Syrah Santa Ynez Valley</li>
                            <li>Quinta do Vallado Douro Reserva</li>
                            <li>Viticcio Chianti Classico Riserva</li>
                            <li>Avignonesi Vino Nobile di Montepulciano</li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    @RenderSection("featured", required: false)
    @RenderBody()
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript" src="@Url.Content("~/js/jquery.ba-cond.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/js/jquery.slitslider.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/js/jquery.easing.1.3.js")"></script>
    <script type="text/javascript">
        $(function () {

            var Page = (function () {

                var $navArrows = $('#nav-arrows'),
                    $nav = $('#nav-dots > span'),
                    slitslider = $('#slider').slitslider({
                        onBeforeChange: function (slide, pos) {

                            $nav.removeClass('nav-dot-current');
                            $nav.eq(pos).addClass('nav-dot-current');

                        }
                    }),

                    init = function () {

                        initEvents();

                    },
                    initEvents = function () {

                        // add navigation events
                        $navArrows.children(':last').on('click', function () {

                            slitslider.next();
                            return false;

                        });

                        $navArrows.children(':first').on('click', function () {

                            slitslider.previous();
                            return false;

                        });

                        $nav.each(function (i) {

                            $(this).on('click', function (event) {

                                var $dot = $(this);

                                if (!slitslider.isActive()) {

                                    $nav.removeClass('nav-dot-current');
                                    $dot.addClass('nav-dot-current');

                                }

                                slitslider.jump(i + 1);
                                return false;

                            });

                        });

                    };

                return { init: init };

            })();

            Page.init();

            /**
             * Notes: 
             * 
             * example how to add items:
             */

            /*
            
            var $items  = $('<div class="sl-slide sl-slide-color-2" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1"><div class="sl-slide-inner bg-1"><div class="sl-deco" data-icon="t"></div><h2>some text</h2><blockquote><p>bla bla</p><cite>Margi Clarke</cite></blockquote></div></div>');
            
            // call the plugin's add method
            ss.add($items);

            */
        });
        $(function () {
            var $ac_background = $('#ac_background'),
$ac_bgimage = $ac_background.find('.ac_bgimage'),
$ac_loading = $ac_background.find('.ac_loading'),

$ac_content = $('#ac_content'),
$title = $ac_content.find('h1'),
$menu = $ac_content.find('.ac_menu'),
$mainNav = $menu.find('ul:first'),
$menuItems = $mainNav.children('li'),
totalItems = $menuItems.length,
$ItemImages = new Array();
            /* 
            for this menu, we will preload all the images. 
            let's add all the image sources to an array,
            including the bg image
            */
            $menuItems.each(function (i) {
                $ItemImages.push($(this).children('a:first').attr('href'));
            });
            $ItemImages.push($ac_bgimage.attr('src'));


            var Menu = (function () {
                var init = function () {
                    loadPage();
                    initWindowEvent();
                },
                loadPage = function () {
                    /*
                        1- loads the bg image and all the item images;
                        2- shows the bg image;
                        3- shows / slides out the menu;
                        4- shows the menu items;
                        5- initializes the menu items events
                     */
                    $ac_loading.show();//show loading status image
                    //$.when(loadImages()).done(function(){
                    //$.when(showBGImage()).done(function(){
                    //hide the loading status image
                    //$ac_loading.hide();
                    $.when(slideOutMenu()).done(function () {
                        $.when(toggleMenuItems('up')).done(function () {
                            initEventsSubMenu();
                        });
                    });
                    //});
                    //});
                },
                showBGImage = function () {
                    return $.Deferred(
                    function (dfd) {
                        //adjusts the dimensions of the image to fit the screen
                        justImageSize($ac_bgimage);
                        $ac_bgimage.fadeIn(1000, dfd.resolve);
                    }
                ).promise();
                },
                slideOutMenu = function () {
                    /* calculate new width for the menu */
                    var new_w = $(window).width() - $title.outerWidth(true);
                    return $.Deferred(
                    function (dfd) {
                        //slides out the menu
                        $menu.stop()
                        .animate({
                            width: new_w + 'px'
                        }, 700, dfd.resolve);
                    }
                ).promise();
                },
                    /* shows / hides the menu items */
                    toggleMenuItems = function (dir) {
                        return $.Deferred(
						function (dfd) {
						    /*
							slides in / out the items. 
							different animation time for each one.
							*/
						    $menuItems.each(function (i) {
						        var $el_title = $(this).children('a:first'),
                                    marginTop, opacity, easing;
						        if (dir === 'up') {
						            marginTop = '0px';
						            opacity = 1;
						            easing = 'easeOutBack';
						        }
						        else if (dir === 'down') {
						            marginTop = '60px';
						            opacity = 0;
						            easing = 'easeInBack';
						        }
						        $el_title.stop()
								.animate({
								    marginTop: marginTop,
								    opacity: opacity
								}, 200 + i * 200, easing, function () {
								    if (i === totalItems - 1)
								        dfd.resolve();
								});
						    });
						}
					).promise();
                    },
                initEventsSubMenu = function () {
                    $menuItems.each(function (i) {
                        var $item = $(this), // the <li>
                        $el_title = $item.children('a:first'),
                        el_image = $el_title.attr('href'),
                        $sub_menu = $item.find('.ac_subitem'),
                        $ac_close = $sub_menu.find('.ac_close');

                        /* user clicks one item : appetizers | main course | desserts | wines | specials */
                        $el_title.bind('click.Menu', function (e) {
                            $.when(toggleMenuItems('down')).done(function () {
                                openSubMenu($item, $sub_menu, el_image);
                            });
                            return false;
                        });
                        /* closes the submenu */
                        $ac_close.bind('click.Menu', function (e) {
                            closeSubMenu($sub_menu);
                            return false;
                        });
                    });
                },
                openSubMenu = function ($item, $sub_menu, el_image) {
                    $sub_menu.stop()
                    .animate({
                        height: '60%',
                        marginTop: '-20%'
                    }, 400, function () {
                        //the bg image changes
                        showItemImage(el_image);
                    });
                },
                    /* changes the background image */
                showItemImage = function (source) {
                    //if its the current one return
                    if ($ac_bgimage.attr('src') === source)
                        return false;

                    var $itemImage = $('<img src="' + source + '" alt="Background" class="ac_bgimage"/>');
                    $itemImage.insertBefore($ac_bgimage);
                    adjustImageSize($itemImage);
                    $ac_bgimage.fadeOut(1500, function () {
                        $(this).remove();
                        $ac_bgimage = $itemImage;
                    });
                    $itemImage.fadeIn(1500);
                },
                closeSubMenu = function ($sub_menu) {
                    $sub_menu.stop()
                    .animate({
                        height: '0px',
                        marginTop: '0px'
                    }, 400, function () {
                        //show items
                        toggleMenuItems('up');
                    });
                },
                    /*
                    on window resize, ajust the bg image dimentions,
                    and recalculate the menus width
                    */
                initWindowEvent = function () {
                    /* on window resize set the width for the menu */
                    $(window).bind('resize.Menu', function (e) {
                        adjustImageSize($ac_bgimage);
                        /* calculate new width for the menu */
                        var new_w = $(window).width() - $title.outerWidth(true);
                        $menu.css('width', new_w + 'px');
                    });
                },
                    /* makes an image "fullscreen" and centered */
                adjustImageSize = function ($img) {
                    var w_w = $(window).width(),
                    w_h = $(window).height(),
                    r_w = w_h / w_w,
                    i_w = $img.width(),
                    i_h = $img.height(),
                    r_i = i_h / i_w,
                    new_w, new_h,
                    new_left, new_top;

                    if (r_w > r_i) {
                        new_h = w_h;
                        new_w = w_h / r_i;
                    }
                    else {
                        new_h = w_w * r_i;
                        new_w = w_w;
                    }

                    $img.css({
                        width: new_w + 'px',
                        height: new_h + 'px',
                        left: (w_w - new_w) / 2 + 'px',
                        top: (w_h - new_h) / 2 + 'px'
                    });
                },
                    /* preloads a set of images */
                loadImages = function () {
                    return $.Deferred(
                    function (dfd) {
                        var total_images = $ItemImages.length,
                        loaded = 0;
                        for (var i = 0; i < total_images; ++i) {
                            $('<img/>').load(function () {
                                ++loaded;
                                if (loaded === total_images)
                                    dfd.resolve();
                            }).attr('src', $ItemImages[i]);
                        }
                    }
                ).promise();
                };

                return {
                    init: init
                };
            })();

            /*
        call the init method of Menu
             */
            Menu.init();
        });
    </script>
    <footer>
        <div class="content-wrapper">
            <div class="float-left">
                <p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p>
            </div>
        </div>
    </footer>

    @RenderSection("scripts", required: false)
</body>
</html>
